<template>
    <div class="pageheader">
    概览
    </div>
    <section id="main-content" class="animated fadeInUp">
      <div class="row">
        <com-timestatistical></com-timestatistical>
        <com-inf-center-hel url="./mock/infCenterHel.json"></com-inf-center-hel>
        <div class="overViewMain row">
          <div class="showCard">
            <h3>{{ FirstCardTitle }}</h3>
            <div class="cardLine"><span>{{ FirstCardTitleSub }}</span></div>
            <div class="row card-info">
              <div class="col-md-6 infoBorder">
                <div>最快流程节点位于</div>
                <div class="fastDemo">学生处</div>
              </div>
              <div class="col-md-6">
                <div>最慢流程节点位于</div>
                <div class="lastDemo">就业中心</div>
              </div>
            </div>
            <com-histogram-charts charts-title='流程处理平均用时排名' charts-sub-text='(数值越小效率越高)' charts-id="histogramCharts" charts-url='care/site/netcenter/getflowstatistic'></com-histogram-charts>
          </div>
          <div class="showCard middleshowcard">
            <h3>{{ secondCardTitle }}</h3>
            <div class="cardLine"><span>{{ secondCardTitleSub }}</span></div>
            <div class="row card-info">
              <div class="col-md-6 infoBorder">
                <div>应用数量最多部门</div>
                <div class="fastDemo">学生处</div>
              </div>
              <div class="col-md-6">
                <div>收藏最多的应用属于</div>
                <div class="lastDemo">就业中心</div>
              </div>
            </div>
            <com-pre-charts pieurl="care/site/netcenter/getappstatistic"></com-pre-charts>
          </div>
          <div class="showCard">
            <h3>{{ ThirdCardTitle }}</h3>
            <div class="cardLine"><span>{{ ThirdCardTitleSub }}</span></div>
            <div class="row card-info">
              <div class="col-md-6 infoBorder">
                <div>评价得分最高</div>
                <div class="fastDemo">学生处</div>
              </div>
              <div class="col-md-6">
                <div>评价得分最低</div>
                <div class="lastDemo">就业中心</div>
              </div>
            </div>
            <com-histogram-charts charts-title='部门信息化服务评价排名' charts-sub-text='(数值越大越好)' charts-id="histogramChartsThi" charts-url='care/site/netcenter/getappscore'></com-histogram-charts>
          </div>
        </div>
      </div>
    </section>
</template>
<script>
import ComTimestatistical from '../../components/timestatistical.vue';
import ComShowcard from '../../components/showcard.vue';
import ComHistogramCharts from '../../components/histogramCharts.vue';
import ComPreCharts from '../../components/pieChart.vue';
import ComInfCenterHel from '../../components/infCenterHel.vue';
export default {
  components: {
    ComTimestatistical,
    ComShowcard,
    ComPreCharts,
    ComHistogramCharts,
    ComInfCenterHel
  },
  data () {
    return {
      FirstCardTitle:'校内流程',
      FirstCardTitleSub:'Process Center',
      secondCardTitle:'校内应用',
      secondCardTitleSub:'Application Center',
      ThirdCardTitle:'信息化服务评价',
      ThirdCardTitleSub:'Service Center'
    }
  }
}
</script>
<style scoped>
div.infoBorder{
  border-right: 1px solid #efefef;
}
div .fastDemo{
  font-size: 16px;
  color: #42dbd5;
  margin-top: 8px;
}
div .lastDemo{
  font-size: 16px;
  color: #ffe67f;
  margin-top: 8px;
}
div.card-info{
  text-align: center;
  margin-top: 24px;
  margin-bottom: 24px;
  color: #b3c2cc;
}
div.headDescription{
  font-size: 18px;
  color: #767E85; 
  letter-spacing: 8px;
}
div.headDescription span:last-child{
  font-size: 12px;
  letter-spacing: normal;
}
div.statistical {
  /*width: 500px;*/
  float: right;
}
div.statistical span{
  float: left;
  height: 50px;
  width: 100px;
  font-size: 14px;
  line-height: 50px;
  color: #767E85; 
}
div.statistical .labelCheckList {
  height: 50px;
  float: left;
  padding-top: 10px;

}
div.statistical button {
    outline:none;
    height: 26px;
    font: -webkit-mini-control;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 8px;
    border-radius: 13px;
    min-width: 80px;
    color: #666;
    background-color: #fff;
}
div.statistical button.active {
    color: #fff;
    background-color: #2ACDCF;
    border: none;
}
div.overViewMain{
  display: inline-block;
  margin-top: 16px;
  width: 100%;
}
div.overViewMain div.showCard {
    width: 32%;
    float: left;
    cursor: pointer;
    min-height: 600px;
    border-radius: 10px;
    background-color:#fff;
    border: 1px solid transparent;
}
div.overViewMain div.showCard:hover{
    border: 1px solid #2ACDCE;
    box-shadow: none;
}
div.showCard h3{
  text-align: center;
  color: #404852;
  font-size: 20px;
}
div.showCard .cardLine{
 border-top: 1px solid #efefef;
 margin-top: 16px;
 margin-left: 24px;
 margin-right: 24px;
 text-align: center;
}
div.showCard .cardLine span{
  background: #fff;
  position: relative;
  top: -12px;
  padding: 0 4px;
  color: #858a91;
}
.middleshowcard {
  margin: 0 2%;
}
.row{
  margin-left: 0;
  margin-right: 0;
}
.overViewFilter,
.headDescription{
  display: inline-block;
}
.overViewFilter{
  float: right;
}
.overViewheader{
  padding: 16px 0;
}
div.overViewFilter div.timeStatistical span{
  vertical-align: 0px;
}
div.pageheader {
    font-size: 20px;
    color: #3F4652;
}

</style>